<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机地图生成</title>
    <link rel="stylesheet" href="../astart/astar.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #contain {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .mod {
            position: absolute;
            left: 20%;
            top: 10%;
            transform: translate(-20%, -50%);
        }

        .wall {
            background: black;
        }

        .wall10 {
            background: black;
        }

        .wall11 {
            background: #b88c4f;
        }

        .ground0 {
            background: #ffffff;
        }

        .ground1 {
            background: #99ffff;
        }

        .ground2 {
            background: #33cccc;
        }

        .endP {
            background: red;
        }

        span {
            color: #b88c4f;
            font-size: 15px;
            display: block;
        }

        .recent {
            background: lightgray;
        }

        .route {
            background-color: red;
        }

    </style>
    <script src="CellularAutomata.js"></script>
</head>
<body>
<div class="mod">

    <input style="display: block" type='button' onclick='operateT()' value='元胞自动'/>
    <br>
    <input style="display: block" type='button' onclick='perlinNoise()' value='伪柏林噪声'/>
    <br>
    <input style="display: block" type='button' onclick='generateWater()' value='生成河流'/>

</div>
</body>
<script src="../astart/jquery-3.2.1.js"></script>
<script>
    //个数
    var side = 60;
    //长度
    var len = 600 / side;
    var rowC = "row" + len;
    var cellC = "cell" + len;
    $("body").append("<div id='contain'></div>");
    for (var i = 0; i < side; i++) {
        $("#contain").append("<div class='row" + len + "'></div>");
        for (var j = 0; j < side; j++) {
            $("#contain div." + rowC + ":eq(" + i + ")").append("<div class='cell" + len + "'></div>")
        }
    }

    //初始化坐标
    for (var i = 0; i < side; i++) {
        for (var j = 0; j < side; j++) {
            getObj(i, j).attr("data-x", i);
            getObj(i, j).attr("data-y", j);
        }
    }

    //根据行列获取当前div.cell
    function getObj(row, col) {
        return $("#contain div." + rowC + ":eq(" + row + ") div." + cellC + ":eq(" + col + ")")
    }

</script>
<script>
    //40*2
    //45*3
    //50*3
    var map = mapHandler(side, side, 49);

    function mask() {
        for (var i = 0; i < side; i++) {
            for (var j = 0; j < side; j++) {
                if (map[i][j] == 1) {
                    getObj(i, j).addClass("wall")
                }
                else {
                    getObj(i, j).removeClass("wall")
                }
            }
        }
    }

    mask();

    function operateT() {

        MakeCaverns(map);
        mask();
    }

    function perlinNoise() {
        //伪柏林算法,unity自带
        for (var i = 0; i < side; i++) {
            for (var j = 0; j < side; j++) {
                if (map[i][j] == 0) {
                    map[i][j] = Math.floor(Math.random() * 3);
                }
                else if (map[i][j] == 1) {
                    map[i][j] = Math.floor(Math.random() * 2 + 10);
                }
            }
        }
        perlinMask()

    }

    function perlinMask() {
        for (var i = 0; i < side; i++) {
            for (var j = 0; j < side; j++) {
                getObj(i, j).removeClass("wall")
                if (map[i][j] == 10) {
                    getObj(i, j).addClass("wall10")
                }
                else if (map[i][j] == 11) {
                    getObj(i, j).addClass("wall11")
                }
                else if (map[i][j] == 0) {
                    getObj(i, j).addClass("ground0")
                }
                else if (map[i][j] == 1) {
                    getObj(i, j).addClass("ground1")
                }
                else if (map[i][j] == 2) {
                    getObj(i, j).addClass("ground2")
                }
            }
        }
    }


    function generateWater() {

    }


</script>
</html>
